import React from 'react'
// ===================================================================== Temp
import SearchForm from '#cpt/temp/SearchForm'
import Table from '#cpt/temp/Table'
import AddEditModal from '#cpt/temp/AddEditModal'
import TableControls from '#cpt/temp/TableControls'
import Controls from '#cpt/temp/Controls'
import Delete from '#cpt/temp/Delete'
// ===================================================================== global declare
const { $fn, $Lazy } = window
// ===================================================================== Lazy
const Page		= $Lazy.load(()=>import('#tp/page/page-container'))
const $cache	= $Lazy.file(()=>import('#private/cache-api'))
const $icon		= import('@assets/icon-font/iconfontdata')
// ===================================================================== component
class Index extends React.Component{
	state = {
		data:[],
		pag: {},
		selectedKeys:[],
		// 搜索表单列表
		forms : [
			{ label:'菜单名称',		name: 'menu_name' },
			{ label: '英文名称',		name: 'menu_en' },
			{ label: '上级菜单',		name: 'parent_id',	type: 'select', loading:true, idStr:'id', nameStr:'menu_name' },
			{ label: '路径 ',		name: 'new_access_route' },
		],
		// 提交表单列表
		formData : [
			{ label: '菜单名称',		name: 'menu_name', 	required:true, full:true },
			{ label: '路径',		name: 'new_access_route', 	required:true, full:true },
			{ label: '英文名称',		name: 'menu_en', 	required:true, half:true },
			{ label: 'web路由',		name: 'web_route', 	half:true },
			{ label: '排序',		name: 'sort', 		half:true, value: 0, type:'number' },
			{ label: '上级菜单',		name: 'parent_id',	type: 'select', required:true, half:true, idStr:'id', nameStr:'menu_name' },
			{ label: '菜单类型',		name: 'menu_type',	type: 'select', required:true, half:true },
			{ label: '所属视图',		name: 'system_view',type: 'select', mode:'tags', half:true, loading:true },
			{ label: '图标',		name: 'icon',		type: 'select', required:true,icon:true, half:true, loading:true, nameStr:'value' },
		]
	}
	
	model = {}
	
	componentDidMount(){
		this.getSelect()
		this.fetch()
	}
	// 获取下拉数据
	getSelect = async () => {
		const { forms, formData } = this.state
		$cache.then( async f => {
			// 上级菜单
			$fn.setRows([ forms, formData ], 'parent_id', await f.getCache({ api:'parent_menu' } ) )
			// 菜单类型
			$fn.setRow(formData, 'menu_type', f.menu_type )
			//
			this.setState({ forms })
		})
		
	}
	
	// 获取弹窗下拉
	getModalSelect = async () => {
		const { formData } = this.state
		$fn.setModalRows(formData, 'system_view', ()=>{
			$cache.then( async f => {
				// 所属视图
				$fn.setRow(formData, 'system_view', await f.getDisCache({ code: 400 }))
				// 图标
				await $icon.then(f => $fn.setRow(formData, 'icon', f['glyphs']))
				//
				this.setState({ formData })
			})
		})
	}
	
	// paging
	fetch = () => $fn.fetch.call(this,'menu/index', {web_version:1})
	
	// 表格
	cols = [
		{ title: '菜单名称', 	dataIndex: 'menu_name', 		width:150 },
		{ title: '英文名称', 	dataIndex: 'menu_en', 			width:200 },
		{ title: '上级菜单', 	dataIndex: 'parent_name', 		width:200 },
		{ title: '图标', 		dataIndex: 'icon', 				width:220 },
		{ title: '排序', 		dataIndex: 'sort', 				...$fn.table.num },
		{ title: '创建时间', 	dataIndex: 'created_at', 		...$fn.table.time },
		TableControls.controls.call(this, { width: 120 })
	]
	// 表格操作按钮
	table_controls = ( text, { uuid, status }) => {
		return [		
			TableControls.edit.call(this,'menu/info',{ uuid }, { select:this.getModalSelect, click:()=>{
				$fn.disabledRows(this.state.formData, 'menu_en', true)
			} }),
			this.onDel([uuid])
		]
	}
	// 操作按钮
	controls = () =>  [
		Controls.add.call(this,{click:()=>{
			const { formData } = this.state
			this.getModalSelect()
			$fn.disabledRows(formData, 'menu_en', false)
			this.setState({ formData })
		}}),
		this.onDel()
	]
	// 删除
	onDel = uuid => Delete.call(this, 'menu/del', { uuid, isKeys: !uuid, onComplete:()=>{
		$fn.resetMenu()
	} })
	
	render(){
		return (
			<>
				<Page title='菜单列表' controls={this.controls()}>
					{/* 搜索 */}
					{ SearchForm.call(this) }
					{/* 表格 */}
					{ Table.call(this) }
				</Page>
				{/* 添加、编辑 */}
				{ AddEditModal.call(this,{ width:'40%', minWidth:600, labelWidth:'s5', api:'menu/add', editApi:'menu/edit', param:{icon:'1'}, onRefresh:()=>{
					$fn.resetMenu()
				} }) }
			</>
		)
	}
}

export default Index